import React, { useEffect } from 'react'
import { withRouter } from 'react-router-dom'
import { Modal, Form, Input, Radio, Select, Button } from 'antd'

function EditForm({
    modalVisible,
    modalOk,
    modalCancel,
    isEdit,
    modalData,
    isRepeat,
    classData,
    history
}) {
    const { Option } = Select
    const [form] = Form.useForm()
    useEffect(() => {
        // console.log(modalData)
        form.setFieldsValue(modalData)
        // console.log(classData)
    }, [classData, form, modalData])

    return (
        <>
            <Modal
                getContainer={false}
                visible={modalVisible}
                title={isEdit ? '修改学生数据' : '添加学生数据'}
                okText={isEdit ? '修改' : '添加'}
                cancelText="取消"
                onCancel={modalCancel}
                onOk={() => {
                    form.validateFields()
                        .then((values) => {
                            form.resetFields()
                            modalOk(
                                {
                                    type: 'S',
                                    ...values
                                },
                                modalData
                            )
                        })
                        .catch((info) => {
                            console.log('Validate Failed:', info)
                        })
                }}
            >
                <Form
                    form={form}
                    layout="vertical"
                    name="form_in_modal"
                    initialValues={modalData}
                >
                    <Form.Item
                        name="no"
                        label="学号"
                        rules={[
                            {
                                required: true,
                                message: '请输入学号'
                            },
                            () => ({
                                validator(rule, value) {
                                    if (!isEdit && isRepeat(value)) {
                                        return Promise.reject('学号已存在')
                                    }
                                    if (
                                        isEdit &&
                                        value !== modalData.no &&
                                        isRepeat(value)
                                    ) {
                                        return Promise.reject('学号已存在')
                                    }
                                    return Promise.resolve()
                                }
                            })
                        ]}
                    >
                        <Input disabled={isEdit} />
                    </Form.Item>
                    <Form.Item
                        name="name"
                        label="姓名"
                        rules={[
                            {
                                required: true,
                                message: '请输入姓名'
                            }
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="sex"
                        label="性别"
                        rules={[{ required: true }]}
                    >
                        <Radio.Group value={modalData.sex}>
                            <Radio value="男">男</Radio>
                            <Radio value="女">女</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        name="className"
                        label="班级名称"
                        rules={[{ required: true }]}
                    >
                        <Select
                            notFoundContent={
                                <span>
                                    暂无班级数据，请先添加班级
                                    <Button
                                        style={{ marginLeft: '10px' }}
                                        type="primary"
                                        size="small"
                                        onClick={() => {
                                            // console.log(history)
                                            history.push('/admin/class')
                                        }}
                                    >
                                        前往
                                    </Button>
                                </span>
                            }
                        >
                            {classData.map((item) => (
                                <Option value={item.name} key={item.no}>
                                    {item.name}
                                </Option>
                            ))}
                        </Select>
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default withRouter(EditForm)
